import React, { useState, useRef, useEffect } from 'react';
import { 
  Calendar, 
  List, 
  Image as ImageIcon, 
  FileSpreadsheet, 
  Printer, 
  PlusCircle, 
  Users, 
  BookOpen, 
  CheckCircle2,
  Trash2,
  Camera,
  MapPin
} from 'lucide-react';

export default function AgendaMengajar() {
  const [activeTab, setActiveTab] = useState('form');
  const [agendas, setAgendas] = useState([]);
  const [notification, setNotification] = useState(null);

  // State untuk Form
  const [formData, setFormData] = useState({
    nama_guru: '',
    nama_mapel: '',
    nama_kelas: '', // Field baru
    tanggal: new Date().toISOString().split('T')[0],
    jam_ke: '', // Menggantikan pertemuan_ke
    materi: '',
    jml_hadir: '',
    jml_absen: '',
    ket_sakit: '0',
    ket_izin: '0',
    ket_alpa: '0',
    nama_siswa_absen: '', // Field baru
    foto_bukti: null
  });

  const fileInputRef = useRef(null);

  // Notifikasi Timer
  useEffect(() => {
    if (notification) {
      const timer = setTimeout(() => setNotification(null), 3000);
      return () => clearTimeout(timer);
    }
  }, [notification]);

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
    
    // Auto-kalkulasi absen jika sakit/izin/alpa diubah
    if (['ket_sakit', 'ket_izin', 'ket_alpa'].includes(name)) {
      setTimeout(() => {
        setFormData(current => {
          const totalAbsen = 
            (parseInt(current.ket_sakit) || 0) + 
            (parseInt(current.ket_izin) || 0) + 
            (parseInt(current.ket_alpa) || 0);
          return { ...current, jml_absen: totalAbsen.toString() };
        });
      }, 0);
    }
  };

  const handleFileChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      // Validasi ukuran file (maks 5MB untuk mengakomodasi kamera HP)
      if (file.size > 5 * 1024 * 1024) {
        showNotification('Ukuran file terlalu besar! Maksimal 5MB.', 'error');
        return;
      }
      
      const reader = new FileReader();
      reader.onloadend = () => {
        setFormData(prev => ({ ...prev, foto_bukti: reader.result }));
      };
      reader.readAsDataURL(file);
    }
  };

  const showNotification = (message, type = 'success') => {
    setNotification({ message, type });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    
    // Validasi sederhana
    if (!formData.nama_guru || !formData.nama_mapel || !formData.nama_kelas || !formData.tanggal || !formData.jam_ke || !formData.materi || !formData.jml_hadir) {
      showNotification('Mohon lengkapi field yang wajib diisi!', 'error');
      return;
    }

    const newAgenda = {
      id: Date.now(),
      ...formData,
      timestamp: new Date().toLocaleString('id-ID')
    };

    setAgendas(prev => [newAgenda, ...prev]);
    showNotification('Agenda berhasil disimpan!');
    
    // Reset Form
    setFormData(prev => ({
      ...prev, // Menyimpan nama_guru, nama_mapel, dan nama_kelas
      tanggal: new Date().toISOString().split('T')[0],
      jam_ke: '', // Dikosongkan karena format bisa "1-2"
      materi: '',
      jml_hadir: '',
      jml_absen: '0',
      ket_sakit: '0',
      ket_izin: '0',
      ket_alpa: '0',
      nama_siswa_absen: '',
      foto_bukti: null
    }));
    if (fileInputRef.current) fileInputRef.current.value = '';
    
    // Pindah ke tab riwayat
    setActiveTab('riwayat');
  };

  const handleDelete = (id) => {
    setAgendas(prev => prev.filter(agenda => agenda.id !== id));
    showNotification('Agenda dihapus.');
  };

  const exportToCSV = () => {
    if (agendas.length === 0) {
      showNotification('Tidak ada data untuk diekspor', 'error');
      return;
    }

    const headers = ['Nama Guru', 'Mata Pelajaran', 'Kelas', 'Tanggal', 'Jam Ke', 'Materi', 'Hadir', 'Absen', 'Sakit', 'Izin', 'Alpa', 'Siswa Absen', 'Waktu Input'];
    const rows = agendas.map(a => [
      `"${a.nama_guru}"`,
      `"${a.nama_mapel}"`,
      `"${a.nama_kelas}"`,
      a.tanggal,
      `"${a.jam_ke}"`,
      `"${a.materi.replace(/"/g, '""')}"`, 
      a.jml_hadir,
      a.jml_absen,
      a.ket_sakit,
      a.ket_izin,
      a.ket_alpa,
      `"${(a.nama_siswa_absen || '').replace(/"/g, '""')}"`,
      a.timestamp
    ]);

    const csvContent = "data:text/csv;charset=utf-8," 
      + [headers.join(','), ...rows.map(e => e.join(','))].join('\n');

    const encodedUri = encodeURI(csvContent);
    const link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", `Agenda_Mengajar_${new Date().toISOString().split('T')[0]}.csv`);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  const printDocument = () => {
    window.print();
  };

  return (
    <div className="min-h-screen bg-slate-50 text-slate-800 font-sans pb-12">
      {/* Header - Disembunyikan saat print */}
      <header className="bg-indigo-600 text-white shadow-md print:hidden">
        <div className="max-w-5xl mx-auto px-4 py-5 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <BookOpen className="w-8 h-8" />
            <h1 className="text-xl font-bold tracking-tight">Agenda Mengajar</h1>
          </div>
          <div className="text-sm font-medium bg-indigo-700 px-3 py-1 rounded-full">
            Portal Guru
          </div>
        </div>
      </header>

      {/* Navigasi Tabs - Disembunyikan saat print */}
      <div className="max-w-5xl mx-auto px-4 mt-6 print:hidden">
        <div className="flex space-x-2 border-b border-slate-200 overflow-x-auto">
          <button
            onClick={() => setActiveTab('form')}
            className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
              activeTab === 'form' 
                ? 'border-indigo-600 text-indigo-600' 
                : 'border-transparent text-slate-500 hover:text-indigo-600 hover:border-indigo-300'
            }`}
          >
            <PlusCircle className="w-4 h-4" />
            Input Agenda
          </button>
          <button
            onClick={() => setActiveTab('riwayat')}
            className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
              activeTab === 'riwayat' 
                ? 'border-indigo-600 text-indigo-600' 
                : 'border-transparent text-slate-500 hover:text-indigo-600 hover:border-indigo-300'
            }`}
          >
            <List className="w-4 h-4" />
            Riwayat Mengajar
            {agendas.length > 0 && (
              <span className="bg-indigo-100 text-indigo-600 py-0.5 px-2 rounded-full text-xs ml-1">
                {agendas.length}
              </span>
            )}
          </button>
        </div>
      </div>

      {/* Notifikasi Toast */}
      {notification && (
        <div className={`fixed top-4 right-4 z-50 flex items-center gap-2 px-4 py-3 rounded-lg shadow-lg text-white print:hidden transition-all transform duration-300 translate-y-0 opacity-100 ${
          notification.type === 'error' ? 'bg-red-500' : 'bg-emerald-500'
        }`}>
          <CheckCircle2 className="w-5 h-5" />
          <p className="font-medium text-sm sm:text-base">{notification.message}</p>
        </div>
      )}

      {/* Konten Utama */}
      <main className="max-w-5xl mx-auto px-4 mt-6">
        
        {/* TAB FORM INPUT */}
        {activeTab === 'form' && (
          <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden print:hidden">
            <div className="px-4 sm:px-6 py-4 border-b border-slate-100 bg-slate-50/50">
              <h2 className="text-lg font-semibold text-slate-800 flex items-center gap-2">
                <Calendar className="w-5 h-5 text-indigo-500" />
                Form Agenda Baru
              </h2>
              <p className="text-sm text-slate-500 mt-1">Isi detail aktivitas belajar mengajar hari ini.</p>
            </div>

            <form onSubmit={handleSubmit} className="p-4 sm:p-6">
              {/* Baris Input Guru, Mapel, Kelas (3 Kolom pada layar besar, 1 kolom di HP) */}
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-6 mb-6">
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">Nama Guru *</label>
                  <input 
                    type="text" 
                    name="nama_guru"
                    value={formData.nama_guru}
                    onChange={handleInputChange}
                    placeholder="Masukkan nama Anda"
                    className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all text-sm"
                    required
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">Mata Pelajaran *</label>
                  <input 
                    type="text" 
                    name="nama_mapel"
                    value={formData.nama_mapel}
                    onChange={handleInputChange}
                    placeholder="Contoh: Matematika"
                    className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all text-sm"
                    required
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">Nama Kelas *</label>
                  <input 
                    type="text" 
                    name="nama_kelas"
                    value={formData.nama_kelas}
                    onChange={handleInputChange}
                    placeholder="Contoh: X IPA 1"
                    className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all text-sm"
                    required
                  />
                </div>
              </div>

              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-8">
                
                {/* Kolom Kiri */}
                <div className="space-y-5">
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                      <label className="block text-sm font-medium text-slate-700 mb-1">Hari/Tanggal *</label>
                      <input 
                        type="date" 
                        name="tanggal"
                        value={formData.tanggal}
                        onChange={handleInputChange}
                        className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all text-sm"
                        required
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-slate-700 mb-1">Jam Ke- *</label>
                      <input 
                        type="text" 
                        name="jam_ke"
                        value={formData.jam_ke}
                        onChange={handleInputChange}
                        placeholder="Contoh: 1-2 atau 3,4"
                        className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all text-sm"
                        required
                      />
                    </div>
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-1">Materi / Catatan *</label>
                    <textarea 
                      name="materi"
                      value={formData.materi}
                      onChange={handleInputChange}
                      rows="4"
                      placeholder="Tuliskan materi yang diajarkan..."
                      className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition-all resize-none text-sm"
                      required
                    ></textarea>
                  </div>
                </div>

                {/* Kolom Kanan */}
                <div className="space-y-5">
                  <div className="bg-slate-50 p-4 rounded-lg border border-slate-200">
                    <h3 className="text-sm font-semibold text-slate-800 mb-3 flex items-center gap-2">
                      <Users className="w-4 h-4 text-indigo-500" /> Statistik Kehadiran Siswa
                    </h3>
                    
                    <div className="grid grid-cols-2 gap-4 mb-4">
                      <div>
                        <label className="block text-xs font-medium text-slate-600 mb-1">Hadir *</label>
                        <input 
                          type="number" 
                          name="jml_hadir"
                          min="0"
                          value={formData.jml_hadir}
                          onChange={handleInputChange}
                          className="w-full px-3 py-2 border border-slate-300 rounded-md focus:ring-2 focus:ring-indigo-500 outline-none text-sm"
                          required
                        />
                      </div>
                      <div>
                        <label className="block text-xs font-medium text-slate-600 mb-1">Total Tidak Hadir</label>
                        <input 
                          type="number" 
                          name="jml_absen"
                          value={formData.jml_absen}
                          readOnly
                          className="w-full px-3 py-2 border border-slate-200 bg-slate-100 rounded-md text-slate-500 font-semibold text-sm"
                        />
                      </div>
                    </div>

                    <div className="border-t border-slate-200 pt-3">
                      <label className="block text-xs font-medium text-slate-600 mb-2">Rincian Tidak Hadir</label>
                      <div className="grid grid-cols-3 gap-3">
                        <div>
                          <label className="block text-[10px] text-slate-500 mb-1 uppercase tracking-wider">Sakit</label>
                          <input type="number" name="ket_sakit" min="0" value={formData.ket_sakit} onChange={handleInputChange} className="w-full px-2 py-1.5 text-sm border border-slate-300 rounded focus:ring-1 focus:ring-indigo-500 outline-none" />
                        </div>
                        <div>
                          <label className="block text-[10px] text-slate-500 mb-1 uppercase tracking-wider">Izin</label>
                          <input type="number" name="ket_izin" min="0" value={formData.ket_izin} onChange={handleInputChange} className="w-full px-2 py-1.5 text-sm border border-slate-300 rounded focus:ring-1 focus:ring-indigo-500 outline-none" />
                        </div>
                        <div>
                          <label className="block text-[10px] text-slate-500 mb-1 uppercase tracking-wider">Alpa</label>
                          <input type="number" name="ket_alpa" min="0" value={formData.ket_alpa} onChange={handleInputChange} className="w-full px-2 py-1.5 text-sm border border-slate-300 rounded focus:ring-1 focus:ring-indigo-500 outline-none" />
                        </div>
                      </div>

                      <div className="mt-3">
                        <label className="block text-xs font-medium text-slate-600 mb-1">Nama Siswa Tidak Hadir</label>
                        <textarea 
                          name="nama_siswa_absen"
                          value={formData.nama_siswa_absen}
                          onChange={handleInputChange}
                          rows="2"
                          placeholder="Contoh: Budi (S), Wati (I)"
                          className="w-full px-3 py-2 border border-slate-300 rounded-md focus:ring-2 focus:ring-indigo-500 outline-none text-sm resize-none"
                        ></textarea>
                      </div>
                    </div>
                  </div>

                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-1">Bukti Foto Mengajar</label>
                    <div className="mt-1 flex justify-center px-4 sm:px-6 pt-5 pb-6 border-2 border-slate-300 border-dashed rounded-lg hover:bg-slate-50 transition-colors relative">
                      {formData.foto_bukti ? (
                        <div className="relative w-full text-center">
                          <img src={formData.foto_bukti} alt="Preview" className="mx-auto max-h-40 object-contain rounded shadow-sm mb-3" />
                          <button 
                            type="button" 
                            onClick={() => { setFormData(p => ({...p, foto_bukti: null})); if(fileInputRef.current) fileInputRef.current.value = ''; }}
                            className="text-sm text-red-500 hover:text-red-700 font-medium bg-red-50 px-3 py-1.5 rounded-md"
                          >
                            Hapus Foto
                          </button>
                        </div>
                      ) : (
                        <div className="space-y-1 text-center w-full">
                          <Camera className="mx-auto h-12 w-12 text-slate-400 mb-3" />
                          <div className="flex flex-col text-sm text-slate-600 justify-center items-center gap-2">
                            <label className="w-full sm:w-auto cursor-pointer bg-white border border-slate-300 px-4 py-2 rounded-md font-medium text-indigo-600 hover:bg-indigo-50 transition-colors focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
                              <span>Buka Kamera / Galeri</span>
                              {/* accept="image/*" akan memicu opsi Kamera/Galeri di HP */}
                              <input 
                                ref={fileInputRef}
                                type="file" 
                                className="sr-only" 
                                accept="image/*"
                                onChange={handleFileChange}
                              />
                            </label>
                          </div>
                          <p className="text-xs text-slate-500 mt-2">Gambar Maks. 5MB</p>
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              </div>

              <div className="mt-8 pt-5 border-t border-slate-200 flex justify-end">
                <button
                  type="submit"
                  className="w-full sm:w-auto bg-indigo-600 text-white px-6 py-3 sm:py-2.5 rounded-lg font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 shadow-sm transition-all flex items-center justify-center gap-2"
                >
                  <CheckCircle2 className="w-5 h-5" />
                  Simpan Agenda
                </button>
              </div>
            </form>
          </div>
        )}

        {/* TAB RIWAYAT / DASHBOARD */}
        {activeTab === 'riwayat' && (
          <div className="bg-white rounded-xl shadow-sm border border-slate-200 print:shadow-none print:border-none">
            {/* Header Riwayat */}
            <div className="px-4 sm:px-6 py-4 border-b border-slate-100 flex flex-col sm:flex-row sm:items-center justify-between gap-4 print:hidden">
              <div>
                <h2 className="text-lg font-semibold text-slate-800">Riwayat Agenda</h2>
                <p className="text-sm text-slate-500">Daftar aktivitas mengajar yang telah diinput.</p>
              </div>
              <div className="flex gap-2 w-full sm:w-auto">
                <button 
                  onClick={exportToCSV}
                  className="flex-1 sm:flex-none justify-center items-center gap-2 flex px-3 py-2 sm:py-1.5 bg-emerald-50 text-emerald-700 border border-emerald-200 rounded-md text-sm font-medium hover:bg-emerald-100 transition-colors"
                >
                  <FileSpreadsheet className="w-4 h-4" />
                  <span className="inline">CSV/Excel</span>
                </button>
                <button 
                  onClick={printDocument}
                  className="flex-1 sm:flex-none justify-center items-center gap-2 flex px-3 py-2 sm:py-1.5 bg-slate-50 text-slate-700 border border-slate-200 rounded-md text-sm font-medium hover:bg-slate-100 transition-colors"
                >
                  <Printer className="w-4 h-4" />
                  <span className="inline">Cetak PDF</span>
                </button>
              </div>
            </div>

            {/* Header Khusus Print (Hanya muncul saat dicetak) */}
            <div className="hidden print:block mb-6 text-center">
              <h1 className="text-2xl font-bold uppercase underline mb-2">Laporan Agenda Mengajar Guru</h1>
              <p className="text-slate-600">Dicetak pada: {new Date().toLocaleDateString('id-ID')}</p>
            </div>

            {/* Tabel Data (Diberi pembungkus overflow-x-auto agar bisa digeser horizontal di HP) */}
            <div className="overflow-x-auto w-full">
              {agendas.length === 0 ? (
                <div className="p-8 sm:p-12 text-center text-slate-500 print:hidden">
                  <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-slate-100 mb-4">
                    <List className="w-8 h-8 text-slate-400" />
                  </div>
                  <p className="text-lg font-medium text-slate-700">Belum ada agenda</p>
                  <p className="text-sm mt-1">Silakan input agenda mengajar Anda pada tab form.</p>
                  <button 
                    onClick={() => setActiveTab('form')}
                    className="mt-4 text-indigo-600 font-medium hover:underline px-4 py-2"
                  >
                    + Buat Agenda Pertama
                  </button>
                </div>
              ) : (
                <table className="w-full text-left border-collapse min-w-[900px] print:min-w-full">
                  <thead>
                    <tr className="bg-slate-50 print:bg-transparent border-b border-slate-200">
                      <th className="px-4 py-3 text-sm font-semibold text-slate-600 w-32">Tanggal</th>
                      <th className="px-4 py-3 text-sm font-semibold text-slate-600 w-48">Guru & Mapel</th>
                      <th className="px-4 py-3 text-sm font-semibold text-slate-600 w-24">Kelas</th>
                      <th className="px-4 py-3 text-sm font-semibold text-slate-600 w-24">Jam</th>
                      <th className="px-4 py-3 text-sm font-semibold text-slate-600 min-w-[200px]">Materi</th>
                      <th className="px-4 py-3 text-sm font-semibold text-slate-600 text-center w-20">Hadir</th>
                      <th className="px-4 py-3 text-sm font-semibold text-slate-600 text-center w-40">Absen & Ket</th>
                      <th className="px-4 py-3 text-sm font-semibold text-slate-600 text-center w-20 print:hidden">Bukti</th>
                      <th className="px-4 py-3 text-sm font-semibold text-slate-600 text-right w-16 print:hidden">Aksi</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-100">
                    {agendas.map((item) => (
                      <tr key={item.id} className="hover:bg-slate-50/50 print:hover:bg-transparent transition-colors">
                        <td className="px-4 py-3 text-sm text-slate-800 whitespace-nowrap">
                          {new Date(item.tanggal).toLocaleDateString('id-ID', { weekday: 'short', day: 'numeric', month: 'short', year: 'numeric' })}
                        </td>
                        <td className="px-4 py-3 text-sm text-slate-800">
                          <div className="font-medium text-slate-900">{item.nama_guru}</div>
                          <div className="text-xs text-slate-500">{item.nama_mapel}</div>
                        </td>
                        <td className="px-4 py-3 text-sm text-slate-800 font-medium">
                          {item.nama_kelas}
                        </td>
                        <td className="px-4 py-3 text-sm text-slate-800 text-center font-medium bg-slate-50/50">
                          {item.jam_ke}
                        </td>
                        <td className="px-4 py-3 text-sm text-slate-800 max-w-xs truncate print:whitespace-normal" title={item.materi}>
                          {item.materi}
                        </td>
                        <td className="px-4 py-3 text-sm text-slate-800 text-center">
                          <span className="bg-emerald-100 text-emerald-800 py-1 px-2.5 rounded-md font-medium text-xs print:bg-transparent print:p-0">
                            {item.jml_hadir}
                          </span>
                        </td>
                        <td className="px-4 py-3 text-sm text-slate-800 text-center">
                          <span className={`${parseInt(item.jml_absen) > 0 ? 'bg-rose-100 text-rose-800' : 'bg-slate-100 text-slate-600'} py-1 px-2.5 rounded-md font-medium text-xs print:bg-transparent print:p-0`}>
                            {item.jml_absen}
                          </span>
                          <div className="text-[10px] text-slate-500 mt-1.5 font-medium tracking-wide">
                            S:{item.ket_sakit} | I:{item.ket_izin} | A:{item.ket_alpa}
                          </div>
                          {item.nama_siswa_absen && (
                            <div className="text-[10px] text-rose-600 mt-1 italic max-w-[140px] mx-auto truncate print:whitespace-normal" title={item.nama_siswa_absen}>
                              {item.nama_siswa_absen}
                            </div>
                          )}
                        </td>
                        <td className="px-4 py-3 text-sm text-slate-800 text-center print:hidden">
                          {item.foto_bukti ? (
                            <div className="relative group inline-block">
                              <ImageIcon className="w-5 h-5 text-indigo-500 cursor-pointer hover:text-indigo-600 transition-colors" />
                              <div className="absolute z-10 hidden group-hover:block bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-48 h-48 bg-white p-2 rounded-lg shadow-xl border border-slate-200 pointer-events-none">
                                <img src={item.foto_bukti} alt="Bukti" className="w-full h-full object-cover rounded-md" />
                              </div>
                            </div>
                          ) : (
                            <span className="text-slate-400">-</span>
                          )}
                        </td>
                        <td className="px-4 py-3 text-sm text-right print:hidden">
                          <button 
                            onClick={() => {
                              if(window.confirm('Yakin ingin menghapus agenda ini?')) {
                                handleDelete(item.id);
                              }
                            }}
                            className="text-rose-500 hover:text-rose-700 p-1.5 rounded-md hover:bg-rose-50 transition-colors"
                            title="Hapus"
                          >
                            <Trash2 className="w-4 h-4" />
                          </button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              )}
            </div>
          </div>
        )}

      </main>
    </div>
  );
}